<!-- 用户登录注册按钮 -->
<template>
  <a-space align="center" style="float: right; margin-right: 15px;">
    <!-- 头像下拉 -->
    <div v-if="isLogin">
      <a-dropdown>
        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            <a-avatar
              style="cursor: pointer"
              shape="square"
              size="large"
              :src="haveAvatar ? userInfo.avatar : ''"
              :style="{
                backgroundColor: haveAvatar ? 'white' : 'green',
                verticalAlign: 'middle',
              }"
            >
              <span style="cursor: pointer">{{ userInfo.name }}</span>
            </a-avatar>
          <font style="margin-left: 5px;">{{ username }}</font>
        </a>
        <a-menu slot="overlay" @click="userOpera" style="margin-top: 10px;">
          <a-menu-item key="1" @click="logout">注销</a-menu-item>
          <a-menu-item key="2">个人中心</a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>

    <!-- 按钮组  :loading="loginTag"  -->
    <a-button
      type="primary"
      v-if="!isLogin"
      @click="
        loginTag = true;
        isReg = false;
      "
      >登录</a-button
    >
    <a-button
      v-if="!isLogin"
      @click="
        loginTag = true;
        isReg = true;
      "
      >注册</a-button
    >
    <login-modal :show.sync="loginTag" :register="isReg" style="z-index:99999;"/>
  </a-space>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getToken, removeToken, removeInfo } from "@/utils/auth";
import { getInfo } from "@/apis/user";
import LoginModal from "@/components/Modal/LoginModal";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { LoginModal },
  data() {
    // 这里存放数据
    return {
      isLogin: false,
      loginTag: false,
      isReg: false,
      haveAvatar: false,
      userInfo: {},
    };
  },
  // 监听属性 类似于data概念
  computed: {
    username() {
      return this.$store.getters.name;
    },
    avatar() {
      return this.$store.getters.avatar;
    },
  },
  //监控data中的数据变化
  watch: {
    loginTag() {
      this.judgeLogin();
    },
  },
  //方法集合
  methods: {
    register() {},
    getInfo() {
      if (this.$store.getters.token) {
        getInfo().then((res) => {
          let data = {
            id: res.data.id,
            avatar: res.data.avatar,
            name: res.data.name,
            concat: res.data.concat,
          };
          if (data.avatar !== null) this.haveAvatar = true;
          this.userInfo = data;
        });
      }
    },
    userOpera(dom) {
      let value = dom.key;
      if (value === "1") this.isLogin = false;
      if (value === "2") {
        this.$router.push("/User/" + this.$store.getters.id);
      }
    },
    judgeLogin() {
      if (getToken()) {
        this.isLogin = true;
        this.loginTag = false;
      } else {
        this.isLogin = false;
      }
      return getToken();
    },
    logout() {
      removeToken();
      getToken();
      removeInfo();
      this.$store.dispatch("user/logout");
      this.$store.dispatch("websocket/WEBSOCKET_CLOSE");
      this.$router.replace("/");
      location.reload();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.judgeLogin();
    this.getInfo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
</style>
